<template>
  <div class="containnerBox">
    <!-- 头部 -->
    <div class="hareder">
      <span>摩托车骑行实时监控数据大屏</span>
    </div>
    <!-- 按钮 -->
    <div class="meun">
      <div class="meunItems" @click="goqirui">金融数据</div>
    </div>
    <!-- 主体区域 -->
    <div class="contentBoy">
      <!-- 主体左侧 -->
      <div class="contentBoyLeft">
        <!-- 年龄占比 -->
        <div class="mmodel_public ageBox">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>年龄占比</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <age></age>
          </div>
        </div>

        <!-- 行业排行 -->
        <div class="mmodel_public yuedupaihang" style="height:735px">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>行业排行</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <workSort @getTotalGenderStats="getTotalGenderStats"></workSort>
          </div>
        </div>
        <!-- 客户概览 -->
        <div class="mmodel_public user">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>客户概览</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <div class="genter">
              <div class="genter_items">
                <div>
                  <i class="el-icon-male" style="color: cadetblue;"></i>
                </div>
                <div>
                  <span>{{ getTotalGenderData.totalMale }}</span>
                  <span style="color: #ccc;font-size: 1.5rem;margin-left: 3px;">人</span>
                </div>
                <div style="color: cadetblue;">{{ getTotalGenderData.malePercent }}</div>
              </div>
              <div class="genter_items">
                <div>
                  <i class="el-icon-female" style="color: pink;"></i>
                </div>
                <div>
                  <span>{{ getTotalGenderData.totalFemale }}</span>
                  <span style="color: #ccc;font-size: 1.5rem;margin-left: 3px;">人</span>
                </div>
                <div style="color: pink;">{{ getTotalGenderData.femalePercent }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体中间 -->
      <div class="contentBoyCenter">
        <!-- 地图组件 -->
        <div class="mapBox">
          <posMap></posMap>
        </div>
        <!-- 骑行状态监测  -->
        <div class="mmodel_public dongtais">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>骑行状态监测</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <dynamics></dynamics>
          </div>
        </div>
      </div>
      <!-- 主体右侧 -->
      <div class="contentBoyRight">
        <!-- 摩托车的实时定位 -->
        <div class="mmodel_public realTimePositioning">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>摩托车的实时定位</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <realTimePositioning></realTimePositioning>
          </div>
        </div>
        <!-- 月度分期品牌排行 -->
        <div class="mmodel_public yuedupaihang">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>月度装机排行</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <carType></carType>
          </div>
        </div>
        <!-- 骑行实时监测 -->
        <div class="mmodel_public yuedupaihang" style="height: 500px;">
          <div class="model_title">
            <img src="../../assets/img/titles/zuo.png" alt />
            <span>骑行实时监测</span>
            <img src="../../assets/img/titles/you.png" alt />
          </div>
          <div class="model_content">
            <realMonitoring></realMonitoring>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入年龄占比组件
import age from "./com/age.vue";
// 引入月度分期品牌排行组件
import carType from "./com/carType.vue";
// 引入行业排行组件
import workSort from "./com/workSort.vue";
// 引入摩托车的实时定位组件
import realTimePositioning from "./com/realTimePositioning.vue";
// 引入摩托车骑行实时监测组件
import realMonitoring from "./com/realMonitoring.vue";
// 引入摩托车动态监测组件
import dynamics from "./com/dynamics.vue";
// 引入地图组件
import posMap from "./com/posMap.vue";
export default {
  components: {
    age,
    carType,
    workSort,
    realTimePositioning,
    realMonitoring,
    dynamics,
    posMap
  },
  data() {
    return {
      // 客户概览数据源
      getTotalGenderData: {}
    };
  },
  methods: {
    // 跳转奇瑞
    goqirui() {
      this.$router.push("/financialData");
    },
    // 获取行业排行子组件传过来男女比例了
    getTotalGenderStats(obj) {
      this.getTotalGenderData = obj;
      console.log(obj, "获取行业排行子组件传过来男女比例了");
    }
  }
};
</script>

<style lang="less">
* {
  padding: 0;
}
.containnerBox {
  position: relative;
  padding: 16px;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  //   background-color: red;
  box-sizing: border-box;
  background-image: url(../../assets/img/pageBg.png);
  background-size: cover;
  background-position: center center;
  //   标题样式
  .hareder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    background-image: url(../../assets/img/top.png);
    background-size: cover;
    background-position: center center;
    span {
      width: 40% !important;
      text-align: center;
      font-size: 2.1vw;
      font-weight: 900;
      letter-spacing: 6px;
      width: 100%;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      margin-top: -20px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  //   主体样式
  .contentBoy {
    display: flex;
    width: 100%;
    margin-top: 20px;
    // 主体左侧
    .contentBoyLeft {
      width: 25%;
      height: 100%;
      //年龄占比
      .ageBox {
        width: 100%;
        height: 400px;
      }
      //月度分期品牌排行
      .yuedupaihang {
        width: 100%;
        height: 380px;
      }
      //客户概览
      .user {
        width: 100%;
        height: 200px;
      }
    }
    // 主体中间
    .contentBoyCenter {
      width: 50%;
      height: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      //   background-color: #00eaff;
      .dongtais {
        width: 100%;
        height: 480px;
        // background-color: #0072ff;
        margin-top: 910px;
      }
    }
    // 主体右侧
    .contentBoyRight {
      width: 25%;
      height: 100%;
      //   摩托车的实时定位
      .realTimePositioning {
        width: 100%;
        height: 500px;
      }
    }
  }
  // 子模块公共样式
  .mmodel_public {
    border: 2px solid transparent;
    border-image: linear-gradient(to right, #06298f, #3264f8);
    border-image-slice: 1;
    margin-top: 15px;
  }
  .model_title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    span {
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding: 0 20px;
      font-size: 1vw;
      font-weight: 700;
    }
  }
  .model_content {
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(100% - 50px);
    // background-color: #fff;
  }
}
.hareder::after {
  position: absolute;
  left: -9%;
  bottom: -26px;
  display: inline-block;
  content: "";
  width: 100%;
  height: 56px;
  background-image: url(../../assets/img/guang.png);
  background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.genter {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 1.3vw;
  color: #fff;
  margin: 20px 0 0;
}

.genter_items {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.genter_items div:nth-child(2) {
  margin: 6px 0 4px;
}
.mapBox {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 48vw;
  height: 98vh;
}
.meun {
  position: fixed;
  top: 40px;
  right: 40px;
  .meunItems {
    width: 95px;
    height: 40px;
    background: radial-gradient(
        155% 81% at 50% 100%,
        rgba(74, 94, 255, 0.5) 0%,
        rgba(0, 0, 0, 0) 100%
      ),
      rgba(255, 255, 255, 0.12);
    // box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.16), 0px 1px 2px 0px rgba(0,0,0,0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
  }
  .meunItems:active {
    background: radial-gradient(
        155% 81% at 50% 100%,
        rgba(255, 74, 74, 0.5) 0%,
        rgba(0, 0, 0, 0) 100%
      ),
      rgba(255, 255, 255, 0.12);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16),
      0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
  }
}
</style>